<template>
  <div class="container">
    <div class="container_head">
      <el-row :gutter="20">
        <el-col :span="6">
          <h3 class="myH3">班级</h3>
        </el-col>
        <el-col :span="18">
          <el-input placeholder="请输入搜索内容" suffix-icon="el-icon-search"
                    @keyup.enter.native="search" class="sousuo">
            <el-button slot="append" icon="el-icon-search" @click="search">搜索</el-button>
          </el-input>
        </el-col>
      </el-row>
    </div>
    <div class="container_body" v-for="(classes,index) in classesList" :key="index">
      <el-row>
        <el-col :span="8">
          <div>
            <img src="img/login2.jpg" style="height: 170px;">
          </div>
        </el-col>
        <el-col :span="8">
          <div style="margin-top: 50px">
            <h3>{{ classes.className }}</h3>
            <h4 style="color: #606266">学生：{{ classes.totalStudent }}人</h4>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="margin-top: 50px">
            <el-button type="primary" icon="el-icon-s-order" circle  @click="toClassNotice(classes)">通知管理</el-button>
<!--            <el-button type="primary" icon="el-icon-s-custom" circle  @click="toClassNotice(classes)">学生管理</el-button>-->
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "CourseList",
  data() {
    return {
      courseName: '',
      //班级数组
      classesList: [],
      user: JSON.parse(window.localStorage.getItem('user')),
    }
  },
  methods: {
    //跳转特定班级通知
    toClassNotice(x) {
      this.$router.push({
        path: '/noticeList',
        query: {
          noticeType: 1,
          classIdid: x.classIdid
        }
      })
    },
  },
  created() {
    const _this = this;
    //获取教师的所有班级
    axios.get("http://localhost:8080/classStuDetail/findClassByTeacherId?teacherId=" + _this.user.userId).then(function (res) {
      _this.classesList = res.data.data;
      console.log("教师所有班级");
      console.log(_this.classesList);
    })
  }
}
</script>

<style scoped>
.container_head {

}

.container_body {
  /*box-shadow: 0 10px 60px 0 rgb(69, 176, 255);*/
  /*text-align: center;*/
  height: 170px;
  width: 72%;
  margin-left: 180px;
  background-color: white;
  padding: 20px;
  shadow: hover;
  margin-bottom: 20px;
  color: black;
}

.container_body:hover {
  box-shadow: 0 2px 30px rgb(69, 176, 255);
}

.sousuo {
  width: 250px;
  margin-left: 500px;
  margin-top: 12px
}
</style>
